<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<div
  fxLayout="column"
  [formGroup]="portMappingForm"
>
  <div fxLayout="row">
    <mat-form-field
      class="mat-block kd-deploy-input-row"
      style="width: 100%"
    >
      <mat-select
        namespace="serviceType"
        formControlName="serviceType"
        i18n-placeholder
        placeholder="Service"
        required
      >
        <mat-option
          *ngFor="let serviceType of serviceTypes"
          [value]="serviceType"
        >
          {{ serviceType.label }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <ng-container>
    <ng-container formArrayName="portMappings">
      <div
        fxLayout="row"
        *ngFor="let portMapping of portMappings.controls; let i = index"
        [formGroupName]="i"
      >
        <mat-form-field
          md-no-float
          class="kd-deploy-input-row kd-port-form-field"
          fxFlex="30"
        >
          <input
            matInput
            type="number"
            name="port"
            formControlName="port"
            i18n-placeholder
            placeholder="Port"
            (change)="checkPortMapping(i)"
            [required]="isFirst(i)"
          />
          <mat-error
            *ngIf="portMapping.get('port').errors?.kdValidInteger"
            i18n
          >
            Port must be an integer.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('port').errors?.required"
            i18n
          >
            Port cannot be empty.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('port').errors?.min"
            i18n
          >
            Port must be greater than 0.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('port').errors?.max"
            i18n
          >
            Port must be less than 65536.
          </mat-error>
        </mat-form-field>

        <p fxFlex="5"></p>

        <mat-form-field
          md-no-float
          class="kd-deploy-input-row kd-port-form-field"
          fxFlex="30"
        >
          <input
            matInput
            type="number"
            name="targetPort"
            formControlName="targetPort"
            i18n-placeholder
            placeholder="Target port"
            min="1"
            max="65535"
            (change)="checkPortMapping(i)"
            [required]="isFirst(i)"
          />
          <mat-error
            *ngIf="portMapping.get('targetPort').errors?.kdValidInteger"
            i18n
          >
            Target port must be an integer.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('targetPort').errors?.required"
            i18n
          >
            Target port cannot be empty.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('targetPort').errors?.min"
            i18n
          >
            Target port must be greater than 0.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('targetPort').errors?.max"
            i18n
          >
            Target port must be less than 65536.
          </mat-error>
        </mat-form-field>

        <p fxFlex="5"></p>

        <mat-form-field
          md-no-float
          class="kd-deploy-input-row kd-port-form-field"
          fxFlex="20"
        >
          <mat-select
            name="protocol"
            formControlName="protocol"
            i18n-placeholder
            placeholder="Protocol"
            kdValidProtocol
            [isExternal]="isExternal"
            required
          >
            <mat-option
              *ngFor="let protocol of protocols"
              [value]="protocol"
              >{{ protocol }}</mat-option
            >
          </mat-select>
          <mat-progress-bar
            class="kd-deploy-form-progress"
            [ngClass]="{'kd-deploy-form-progress-show': portMapping.get('protocol').pending}"
            mode="indeterminate"
          >
          </mat-progress-bar>
          <mat-error
            *ngIf="portMapping.get('protocol').errors?.required"
            i18n
          >
            Protocol is required.
          </mat-error>
          <mat-error
            *ngIf="portMapping.get('protocol').errors?.validProtocol"
            i18n
          >
            Invalid protocol.
          </mat-error>
        </mat-form-field>

        <div fxFlex="10">
          <button
            mat-icon-button
            *ngIf="isRemovable(i)"
            (click)="remove(i)"
          >
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
